<!--
 * @Author: zjj
 * @Date: 2020-02-17 16:05:18
 * @LastEditors: zjj
 * @LastEditTime: 2020-02-18 16:25:56
 -->
<!--  -->
<template>
  <div class="contianer-index">
    <div class="content">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <Tab :bottomMenu="bottomMenu">
      <template v-slot="{item,active}">
        <img class="img" :src="active?item.selectUrl:item.unselectUrl" alt />
      </template>
    </Tab>
    <!-- <a href="http://icp.chinaz.com/weile9.com"><div class="ba">浙ICP备18011988号-1</div> </a> -->
  </div>
</template>

<script>
import person from '../assets/imgs/tabBottom/person.png'
import personSelected from '../assets/imgs/tabBottom/personSelected.png'
import home from '../assets/imgs/tabBottom/home.png'
import homeSelected from '../assets/imgs/tabBottom/homeSelected.png'
import order from '../assets/imgs/tabBottom/order.png'
import orderSelected from '../assets/imgs/tabBottom/orderSelected.png'
import service from '../assets/imgs/tabBottom/service.png'
import serviceSelected from '../assets/imgs/tabBottom/serviceSelected.png'
import shoppingCar from '../assets/imgs/tabBottom/shopping-car.png'
import shoppingCarSelected from '../assets/imgs/tabBottom/shopping-car-selected.png'
import notice from '../assets/imgs/tabBottom/notice.png'
import noticeSelected from '../assets/imgs/tabBottom/notice_selected.png'
import Tab from '../components/Tab'
export default {
  name: 'Index',
  components: {
    Tab
  },
  data() {
    return {
      tabIndex: 0,
      bottomMenu: [
        {
          name: '首页',
          path: '/index/home',
          selectUrl: homeSelected,
          unselectUrl: home
        },
        {
          name: '订单',
          path: '/index/order',
          selectUrl: orderSelected,
          unselectUrl: order
        },
        {
          name: '公告',
          path: '/index/openReward',
          selectUrl: serviceSelected,
          unselectUrl: service
        },
        {
          name: '购物车',
          path: '/index/shoppingCar',
          selectUrl: shoppingCarSelected,
          unselectUrl: shoppingCar
        },
        {
          name: '我的',
          path: '/index/person',
          selectUrl: personSelected,
          unselectUrl: person
        }
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.contianer-index {
  height: 100%;
  .content {
    height: calc(100% - 50px);
  }
  .img{
    height: 20px;
    width: 20px;
  }

}
</style>